<template>
    <div>
       <Head></Head>
       <main>
           <el-form  ref="form" :hide-required-asterisk="bool" :model="form" label-width="80px">
                <el-form-item :required="bool" label="店铺名称">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item :required="bool" label="详细地址">
                  <el-input v-model="form.address" placeholder="请输入地址"></el-input>
                </el-form-item>
                <el-form-item :required="bool" label="联系电话">
                  <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="店铺简介">
                  <el-input v-model="form.jieshao" placeholder="请输入店铺简绍"></el-input>
                </el-form-item>
              
                
                
                
                
                <el-form-item label="店铺特点">
                  <el-checkbox-group v-model="form.type">
                    <el-checkbox label="品牌保证" name="type"></el-checkbox>
                    <el-checkbox label="蜂鸟专送" name="type"></el-checkbox>
                    <el-checkbox label="新开店铺" name="type"></el-checkbox>
                    <el-checkbox label="外卖保" name="type"></el-checkbox>
                    <el-checkbox label="准时达" name="type"></el-checkbox>
                      <el-checkbox label="开发票" name="type"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="配送费">
                  <el-input-number v-model="form.peinum" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
                </el-form-item>
                <el-form-item label="起送费">
                  <el-input-number v-model="form.qinum" controls-position="right" @change="handleChange1" :min="1" :max="20"></el-input-number>
                </el-form-item>
                <el-form-item label="营业时间">
                  <el-time-select
                  placeholder="起始时间"
                  v-model="form.startTime"
                
                
                  :picker-options="{
                    start: '08:30',
                    step: '00:15',
                    end: '18:30'
                  }">
                </el-time-select>
                <el-time-select
                  placeholder="结束时间"
                  v-model="form.endTime"
                  :picker-options="{
                    start: '08:30',
                    step: '00:15',
                    end: '18:30',
                    minTime: form.startTime
                  }">
                </el-time-select>
                </el-form-item>
                <el-form-item label="店铺头像">
                <el-upload
                class="avatar-uploader"
                action="/myE/addShop/add_img"
                list-type="picture-card"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>

                </el-form-item>
                <el-form-item label="营业执照">
                <el-upload
                class="avatar-uploader"
                action="/myE/addShop/add_img"
                list-type="picture-card"
                :show-file-list="false"
                :on-success="handleAvatarSuccess1"
                :before-upload="beforeAvatarUpload1">
                <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>

  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>  
       </main>

    </div>
</template>

<script>
import Head from '../components/head'
import {ajax_addShop} from '../ajax/index'
import $ from '../ajax/jquery'
export default {
    name: '',
    data(){
     return{
        form: {
          name: '',
          address:'',
          phone:'',
          jieshao:'',
          // classfy:'',
          type:[],
          region: '',
          peinum:5,
          qinum:15,
          startTime: '',
          endTime: '',
          dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,

         
        },
        
       
        bool:false,
        imageUrl: '',
        imageUrl1:'',
        img_url:'',
        img_url1:'',
        // Id:16
     }
    },
    methods:{
         onSubmit() {
            console.log(this.value)
          
            ajax_addShop({
                name:this.form.name,
                address:this.form.address,
                phone:this.form.phone,
                jshao:this.form.jieshao,
                
                tedian:JSON.stringify(this.form.type),
                pei_money:this.form.peinum,
                qisong_money:this.form.qinum,
                start_time:this.form.startTime,
                end_time:this.form.endTime,
                shop_img:this.img_url, 
                yingY_img:this.img_url1,
          
           
         }).then(res=>{
           alert(res.message)
         
         })
        
       
      },
       handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.img_url=file.name
        console.log(file)
        // this.$refs.upload.clearFiles()
  
      },
      handleAvatarSuccess1(res, file) {
        this.imageUrl1 = URL.createObjectURL(file.raw);
        this.img_url1=file.name
        console.log(file)
        // this.$refs.upload.clearFiles()
  
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      beforeAvatarUpload1(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
       handleChange(value) {
        console.log(value);
      },
      handleChange1(value) {
        console.log(value);
      }
   
    },
    components:{
        Head,
    },
    created(){
        // console.log(this.$route.query.obj);
        // this.can1=JSON.parse(this.$route.query.obj);
        // console.log(this.can)
    }
}
</script>

<style scoped>
main{
    width: 45%;
    height: 600px;
    overflow: auto;
    margin-left: 200px;
    margin-top: 40px;
    scrollbar-width:none;
}

/* main::-moz-scrollbar{
  width: 0 !important;
} */
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    /* width: px;
    height: px;
    line-height: 178px; */
    text-align: center;
  }
  .avatar {
    width: 100%;
    height: 100%;
    display: block;
  }
</style>